<template>
  <el-sub-menu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :teleported="false">
    <template #title>
      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
      <span>{{ menu.name }}</span>
    </template>
    <main-sidebar-sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></main-sidebar-sub-menu>
  </el-sub-menu>
  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu.id)">
    <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script setup>
import MainSidebarSubMenu from './main-sidebar-sub-menu.vue'
import {useRouter} from "vue-router";

const router = useRouter()
defineProps({
  menu: {
    type: Object,
    required: true
  }
})

// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
const gotoRouteHandle = (menuId) => {
  const route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0];
  if (route) {
    router.push({ name: route.name })
  }
}
</script>
